
<template>
  <div class="kfcenter">
    <van-nav-bar title="个人简历" safe-area-inset-top left-arrow @click-left="onClickLeft" />
    <!-- <div class="pic" style="position: relative">
      <div class="text">详情加客服QQ:{{ appqq }}</div>
      <img :src="img" alt="" />
    </div> -->
    <div class="h30">基本信息</div>
    <van-field v-model="userinfo.name" label="姓名" placeholder="请输入姓名" input-align="right" />
    <van-cell title="性别" is-link :value="userinfo.xb" @click="isshow(0)" />
    <van-cell title="年龄" is-link :value="userinfo.age" @click="isshow(1)" />
    <van-cell title="身份" is-link :value="userinfo.shengfen" @click="isshow(2)" />
    <van-cell title="学历" is-link :value="userinfo.xueli" @click="isshow(3)" />
    <van-cell title="工作年限" is-link :value="userinfo.nianxian" @click="isshow(4)" />
    <van-cell title="求职状态" is-link :value="userinfo.zhuangtai" @click="isshow(5)" />
  </div>
  <van-popup v-model:show="show" position="bottom" :default-index="0" :style="{ height: '30%' }">
    <van-picker :columns="columns[nub]" @confirm="onConfirm" @cancel="onCancel" @change="onChange" />
  </van-popup>
  <div class="btnssss">
    <van-button round size="large" block type="success" @click="onbc">保存/修改</van-button>
  </div>
</template>

<script>
import { reactive, toRefs } from "vue";
import { Toast } from "vant";
export default {
  name: "Cscenter",
  setup() {
    const data = reactive({
      userinfo: {
        name: "",
        xb: "请选择",
        age: "请选择",
        shengfen: "请选择",
        xueli: "请选择",
        nianxian: "请选择",
        zhuangtai: "请选择",
      },
      appqq: window.appqq,
      show: false,
      nub: 0,
      columns: [
        ["男", "女"],
        ["18岁以下", "20岁-25岁", "25岁-30岁", "30岁-35岁", "40岁以上"],
        ["学生", "非学生"],
        ["初中及以下", "高中", "大专", "本科及以上"],
        ["无工作经验", "0-1年", "1-3年", "3-5年", "5-10年", "10年以上"],
        ["积极找工作", "目前不找工作"],
      ],
    });
    const onChange = (value) => {
      switch (data.nub) {
        case 0:
          data.userinfo.xb = value;
          break;
        case 1:
          data.userinfo.age = value;
          break;
        case 2:
          data.userinfo.shengfen = value;
          break;
        case 3:
          data.userinfo.xueli = value;
          break;
        case 4:
          data.userinfo.nianxian = value;
          break;
        case 5:
          data.userinfo.zhuangtai = value;
          break;
      }
    };
    const onConfirm = (value) => {
      switch (data.nub) {
        case 0:
          data.userinfo.xb = value;
          data.show = false;
          break;
        case 1:
          data.userinfo.age = value;
          data.show = false;
          break;
        case 2:
          data.userinfo.shengfen = value;
          data.show = false;
          break;
        case 3:
          data.userinfo.xueli = value;
          data.show = false;
          break;
        case 4:
          data.userinfo.nianxian = value;
          data.show = false;
          break;
        case 5:
          data.userinfo.zhuangtai = value;
          data.show = false;
          break;
      }
    };

    const onCancel = () => {
      data.show = false;
    };
    const isshow = (i) => {
      data.nub = i;
      data.show = true;
    };

    const onbc = () => {
      if (data.userinfo.name) {
        localStorage.setItem("userinfo", JSON.stringify(data.userinfo));
        Toast("保存修改成功");
      } else {
        Toast("请先填写姓名,再保存!!");
      }
    };

    const onuserinfo = () => {
      if (localStorage.getItem("userinfo")) {
        data.userinfo = JSON.parse(localStorage.getItem("userinfo"));
      }
    };
    onuserinfo();
    const img = require("../assets/mine/kfqq.jpg");
    return {
      img,
      ...toRefs(data),
      onChange,
      onCancel,
      onConfirm,
      isshow,
      onbc,
    };
  },
  methods: {
    //点击回退按钮
    onClickLeft() {
      this.$router.go(-1);
    },
  },
};
</script>
 
<style lang="scss" scoped>
.kfcenter {
  // text-align: center;
  .pic {
    position: relative;
    margin-top: 30%;
    .text {
      color: #aaa;
      font-size: 15px;
      position: absolute;
      top: 260px;
      left: 120px;
    }
    img {
      width: 100%;
      // height: 100vh;
    }
  }
  .h30 {
    margin-top: 50px;
    font-weight: 600;
    padding: 0 15px;
    font-size: 18px;
    display: none;
  }
}
.btnssss {
  width: 88%;
  margin: 20px auto;
}
</style>